<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/css/public.css" media="all" />
    <link rel="stylesheet" href="${ctx}/js/dtree/dtree/dtree.css">
    <link rel="stylesheet" href="${ctx}/js/dtree/dtree/font/dtreefont.css">

</head>
<body class="childrenBody">

    <div class="layui-col-md9 layui-col-xs7">
        <a class="layui-btn layui-btn-normal add_btn" data-type="add">新增</a>
        <div class="layui-form-item magt3">
            <ul id="menuTree" class="dtree" data-id="0" style="margin-left: 100px;border: 1px solid #ccc"></ul>
        </div>
    </div>
<script type="text/javascript" src="${ctx}/layui/layui.js"></script>

<script>
    layui.config({
        base: '${ctx}/js/dtree/dist/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        dtree: 'dtree' //定义该组件模块名
    }).use(['form','layer','layedit','laydate','upload','dtree','element'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            dtree = layui.dtree,
            laypage = layui.laypage,
            layedit = layui.layedit,
            $ = layui.jquery;

        var menuTreeOb = dtree.render({
            elem: "#menuTree",  //绑定元素
            <%--url: "${ctx}/json/demoTree.json",  //演示数据--%>
            url: "${ctx}/role/getRoleMenu",
            request: {"roleId": ''},
            async: false,  // 只需将该参数设置为false，即可同步加载
            method: "get",
            icon: "-1",  // 隐藏二级图标
            toolbar:true,
            toolbarScroll:"#menuTree", //划重点，必须配置，属性含义请参考文档
            toolbarLoad: "node",  // 表示工具栏加载的节点，  可选的值还有：noleaf（非最后一级）,leaf（最后一级节点）
            toolbarBtn:[
                [
                    {"label":"地址","name":"href","type":"text"},
                    {"label":"图标","name":"icon","type":"text"}
                ],
                [
                    {"label":"地址","name":"href","type":"text"},
                    {"label":"图标","name":"icon","type":"text"}
                ]
            ],
            toolbarFun: {
                loadToolbarBefore: function(buttons, param, $div){
                    if(param.isLeaf&&param.level==2){ // 如果是叶子节点
                        buttons.addToolbar = "";  // 取消新增功能
                    }
                    return buttons; // 将按钮对象返回
                },
                addTreeNode: function(treeNode){
                    $.ajax({
                        url: '${ctx}/menu/saveLevelTwo',
                        method: 'post',
                        data: {title: treeNode.addNodeName, pid: treeNode.parentId,href: treeNode.href,icon: treeNode.icon},
                        success: function(result){
                            var res = JSON.parse(result)
                            if (res.code == 10200) {
                                menuTreeOb.changeTreeNodeAdd(res.data);
                            }else {
                                menuTreeOb.changeTreeNodeAdd(false);
                            }
                        },
                        error: function(){
                            menuTreeOb.changeTreeNodeAdd(false);
                        }
                    })
                },
                delTreeNode: function(treeNode){
                    $.ajax({
                        url: '${ctx}/menu/deleteById',
                        method: 'post',
                        data: {menuId: treeNode.nodeId},
                        success: function(result){
                            var res = JSON.parse(result)
                            if (res.code == 10200) {
                                menuTreeOb.changeTreeNodeDel(true);
                            }else {
                                menuTreeOb.changeTreeNodeDel(false);
                            }
                        },
                        error: function(){
                            menuTreeOb.changeTreeNodeDel(false);
                        }
                    })
                },
                editTreeLoad: function(treeNode){
                    $.ajax({
                        async:false,
                        url: '${ctx}/menu/getById',
                        method: 'get',
                        data: {menuId: treeNode.nodeId},
                        success: function(result){
                            var res = JSON.parse(result)
                            if (res.code == 10200) {
                                menuTreeOb.changeTreeNodeDone(res.data);
                            }else {
                                menuTreeOb.changeTreeNodeDel(false);
                            }
                        },
                        error: function(){
                            menuTreeOb.changeTreeNodeDel(false);
                        }
                    });
                },
                editTreeNode: function(treeNode){
                    $.ajax({
                        async:false,
                        url: '${ctx}/menu/update',
                        method: 'post',
                        data: {
                            id: treeNode.nodeId,
                            pid: treeNode.parentId,
                            href: treeNode.href,
                            icon: treeNode.icon,
                            title: treeNode.context
                        },
                        success: function(result){
                            var res = JSON.parse(result)
                            if (res.code == 10200) {
                                menuTreeOb.changeTreeNodeEdit(true);
                            }else {
                                menuTreeOb.changeTreeNodeEdit(false);
                            }
                        },
                        error: function(){
                            menuTreeOb.changeTreeNodeEdit(false);
                        }
                    });
                }
            }
        });


        //新增
        $(".add_btn").click(function () {
            toEdit();
        });

        //新增菜单
        function toEdit() {
            var index = layui.layer.open({
                title: "新增菜单",
                type: 2,
                content: "${ctx}/page/toEditMenu",
                success: function () {
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            })
            layui.layer.full(index);
                //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
                $(window).on("resize", function () {
                layui.layer.full(index);
            })
        }
    });
</script>
</body>
</html>
